<template>
    <!-- <template v-if="useMediaSize">
		<match-media orientation="portrait">
			<view class="dam-flex_column dam-page portrait">
				<slot>
				</slot>
			</view>
		</match-media>
		<match-media orientation="landscape">
			<view class="dam-flex_column dam-page landscape">
				<slot></slot>
			</view>
		</match-media>
	</template>
<template v-else> -->
    <view class="dam-flex_column dam-page">
        <slot></slot>
    </view>
    <!-- </template> -->
</template>

<script lang="ts" setup>
import { usePageStore } from "@/dam_uni_frame/stores/stores"
import { storeToRefs } from 'pinia'
const pageStore = usePageStore();
const { windowH, windowW } = storeToRefs(pageStore);

const props = defineProps({
    // 	/**
    // 	 * 是否用媒体查询方法设置宽高，使用media的方式效率高，但部分第三方组件不支持；使用插槽時，watch还会走两次
    // 	 */
    // 	useMediaSize: {
    // 		type: Boolean,
    // 		default: true
    // 	},
    height: {
        type: String,
        default: "100vh"
    },
    width: {
        type: String,
        default: "100vw"
    }
})
</script>

<style lang="scss" scoped>
@import "/dam_uni_frame/styles/dam_theme_common.scss";

.dam-page {
    overflow: hidden;
    height: v-bind('props.height');
    width: v-bind('props.width');
    // @include themify() {
    // 	background-color: themed("color_bg");
    // }
}

.dam-page.portrait {
    height: 100vh;
    width: 100vw;
}

.dam-page.landscape {
    height: 100vh;
    width: 100vw;
}

// 如果要做pad版本，可以参考这个
// .dam-page.landscape {
// 	height: 100vw;
// 	width: 100vh;
// }</style>